<!-- 编辑流程 -->
<template>
    <Modal class="add_form" v-model="modal" title="编辑流程" :mask-closable="false" draggable sticky scrollable
        @on-cance="cancel" @on-visible-change="cancel" width="800px">
        <Form ref="formEl" :model="formData" :rules="rules" label-position="top">
            <div class="flex_form_item">
                <FormItem label="流程名称" prop="name">
                    <Input v-model="formData.name" placeholder="请输入流程名称" clearable></Input>
                </FormItem>
            </div>
        </Form>
        <template #footer>
            <Button @click="cancel">取消</Button>
            <Button type="primary" @click="submit">确定</Button>
        </template>
    </Modal>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const emit = defineEmits(['cancel', 'submit']);

const props = defineProps({
    data: Object
})

// 是否打开弹窗
const modal = true;

// 加载
const loading = ref(true)

// 表单元素ref
const formEl = ref(null);

// 表单字段
const formData = ref({
    name: ''
})

// 表单校验条件
const rules = ref({
    name: [{ required: true, message: '请填写流程名称', trigger: 'blur' }]
})

/**
 * 提交表单
 */
const submit = async () => {
    let valid = await formEl.value.validate((valid, fild) => valid ? valid : fild);
    if (!valid) return;
    setTimeout(() => { loading.value = true }, 1000)
    emit('submit');
}

/**
 * 取消表单
 */
const cancel = () => {
    emit('cancel');
}

onMounted(() => {
    formData.value = props.data;
})

</script>